<template>
  <div class="bank-statement-page">
    <!-- Header -->
    <header class="page-header">
      <div class="container">
        <div class="header-content">
          <div class="header-left">
            <button @click="navigateBack" class="btn-back">
              ← 返回
            </button>
            <div class="header-info">
              <h1>银行对账单</h1>
              <p>查看和下载账户对账单</p>
            </div>
          </div>
          <div class="header-actions">
            <button @click="downloadPDF" class="btn-download">
              📄 下载PDF
            </button>
            <button @click="printStatement" class="btn-print">
              🖨️ 打印
            </button>
          </div>
        </div>
      </div>
    </header>

    <!-- Statement Filters -->
    <div class="filters-section">
      <div class="container">
        <div class="filters-card">
          <div class="filter-group">
            <label for="account_select">选择账户</label>
            <select id="account_select" v-model="selectedAccountId" @change="loadStatement">
              <option v-for="account in accounts" :key="account.account_id" :value="account.account_id">
                {{ account.account_number }} - {{ account.account_type }} ({{ account.customer_name }})
              </option>
            </select>
          </div>
          <div class="filter-group">
            <label for="date_from">起始日期</label>
            <input type="date" id="date_from" v-model="dateFrom" @change="loadStatement" />
          </div>
          <div class="filter-group">
            <label for="date_to">结束日期</label>
            <input type="date" id="date_to" v-model="dateTo" @change="loadStatement" />
          </div>
          <div class="filter-actions">
            <button @click="loadStatement" class="btn-filter">
              刷新对账单
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Statement Content -->
    <div class="statement-container" ref="statementRef">
      <div class="container">
        <div class="statement-card" v-if="selectedAccount">
          <!-- Bank Header -->
          <div class="bank-header">
            <div class="bank-info">
              <h1 class="bank-name">MyBank</h1>
              <div class="bank-details">
                <p>中国北京市朝阳区建国门外大街1号</p>
                <p>邮编: 100004</p>
                <p>电话: +86 (010) 8888-8888</p>
                <p>传真: +86 (010) 8888-8889</p>
                <p>网址: www.mybank.com</p>
              </div>
            </div>
            <div class="bank-logo">
              <div class="logo-placeholder">
                🏦 MyBank
              </div>
            </div>
          </div>

          <!-- Statement Title -->
          <div class="statement-title">
            <h2>账户对账单</h2>
            <div class="statement-period">
              <span>对账期间: {{ formatDate(dateFrom) }} 至 {{ formatDate(dateTo) }}</span>
            </div>
          </div>

          <!-- Account Information -->
          <div class="account-info-section">
            <div class="account-details">
              <div class="detail-row">
                <span class="detail-label">账户持有人:</span>
                <span class="detail-value">{{ selectedAccount.customer_name }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">账户号码:</span>
                <span class="detail-value">{{ selectedAccount.account_number }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">账户类型:</span>
                <span class="detail-value">{{ selectedAccount.account_type }}</span>
              </div>
              <div class="detail-row">
                <span class="detail-label">开户日期:</span>
                <span class="detail-value">{{ formatDate(selectedAccount.created_at) }}</span>
              </div>
            </div>
            <div class="balance-info">
              <div class="balance-item">
                <span class="balance-label">期初余额:</span>
                <span class="balance-value">¥{{ formatCurrency(statementData.opening_balance) }}</span>
              </div>
              <div class="balance-item">
                <span class="balance-label">期末余额:</span>
                <span class="balance-value highlight">¥{{ formatCurrency(statementData.closing_balance) }}</span>
              </div>
            </div>
          </div>

          <!-- Transaction Summary -->
          <div class="summary-section">
            <h3>交易汇总</h3>
            <div class="summary-grid">
              <div class="summary-item">
                <span class="summary-label">总收入:</span>
                <span class="summary-value credit">¥{{ formatCurrency(statementData.total_credits) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">总支出:</span>
                <span class="summary-value debit">¥{{ formatCurrency(statementData.total_debits) }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">交易笔数:</span>
                <span class="summary-value">{{ statementData.transaction_count }}</span>
              </div>
              <div class="summary-item">
                <span class="summary-label">净变动:</span>
                <span class="summary-value" :class="{ 'credit': statementData.net_change >= 0, 'debit': statementData.net_change < 0 }">
                  ¥{{ formatCurrency(statementData.net_change) }}
                </span>
              </div>
            </div>
          </div>

          <!-- Transaction Details -->
          <div class="transactions-section">
            <h3>交易明细</h3>
            <div class="transactions-table-container">
              <table class="transactions-table">
                <thead>
                  <tr>
                    <th>日期</th>
                    <th>交易描述</th>
                    <th>参考号</th>
                    <th>借方金额</th>
                    <th>贷方金额</th>
                    <th>余额</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="opening-balance-row">
                    <td>{{ formatDate(dateFrom) }}</td>
                    <td><strong>期初余额</strong></td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td class="balance-cell">¥{{ formatCurrency(statementData.opening_balance) }}</td>
                  </tr>
                  <tr v-for="transaction in statementData.transactions" :key="transaction.transaction_id">
                    <td>{{ formatDate(transaction.transaction_date) }}</td>
                    <td>{{ transaction.description }}</td>
                    <td>{{ transaction.reference_number || '-' }}</td>
                    <td class="amount-cell debit">
                      {{ transaction.amount < 0 ? formatCurrency(Math.abs(transaction.amount)) : '-' }}
                    </td>
                    <td class="amount-cell credit">
                      {{ transaction.amount > 0 ? formatCurrency(transaction.amount) : '-' }}
                    </td>
                    <td class="balance-cell">¥{{ formatCurrency(transaction.running_balance) }}</td>
                  </tr>
                  <tr class="closing-balance-row">
                    <td>{{ formatDate(dateTo) }}</td>
                    <td><strong>期末余额</strong></td>
                    <td>-</td>
                    <td>-</td>
                    <td>-</td>
                    <td class="balance-cell highlight">¥{{ formatCurrency(statementData.closing_balance) }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

          <!-- Statement Footer -->
          <div class="statement-footer">
            <div class="footer-info">
              <div class="footer-section">
                <h4>重要提示</h4>
                <ul>
                  <li>请仔细核对您的账户对账单</li>
                  <li>如发现任何差异，请在30天内联系我行</li>
                  <li>本对账单仅供参考，不承担信息准确性责任</li>
                  <li>如需帮助，请致电客服热线：400-888-8888</li>
                </ul>
              </div>
              <div class="footer-section">
                <h4>银行信息</h4>
                <p><strong>银行代码:</strong> MYBANK001</p>
                <p><strong>SWIFT代码:</strong> MYBKCNBJXXX</p>
                <p><strong>营业执照:</strong> 91110000000000001X</p>
                <p><strong>金融许可证:</strong> B0001H111000001</p>
              </div>
            </div>
            <div class="generation-info">
              <p><strong>生成时间:</strong> {{ formatDateTime(new Date()) }}</p>
              <p><strong>页码:</strong> 第 1 页，共 1 页</p>
              <p><strong>对账单编号:</strong> {{ statementData.statement_id }}</p>
            </div>
          </div>
        </div>

        <!-- No Data State -->
        <div class="no-data-state" v-else-if="!isLoading">
          <div class="no-data-icon">📄</div>
          <h3>暂无对账单数据</h3>
          <p>请选择账户和日期范围以生成对账单</p>
        </div>

        <!-- Loading State -->
        <div class="loading-state" v-if="isLoading">
          <div class="loading-spinner"></div>
          <p>正在生成对账单...</p>
        </div>
      </div>
    </div>

    <!-- Success Notification -->
    <div class="notification success-notification" v-if="showNotification">
      <div class="notification-icon">✓</div>
      <div class="notification-content">
        <div class="notification-title">操作成功</div>
        <div class="notification-message">{{ notificationMessage }}</div>
      </div>
      <button class="notification-close" @click="showNotification = false">&times;</button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, nextTick } from 'vue';

// 响应式数据
const selectedAccountId = ref('');
const dateFrom = ref('');
const dateTo = ref('');
const isLoading = ref(false);
const showNotification = ref(false);
const notificationMessage = ref('');
const statementRef = ref(null);

// 模拟账户数据
const accounts = ref([
  {
    account_id: 1,
    account_number: 'CN94 0001 2345 6789 0123 456',
    account_type: '储蓄账户',
    customer_name: '张三',
    balance: 98611.30,
    created_at: '2023-01-15T10:30:00Z'
  },
  {
    account_id: 2,
    account_number: 'CN94 0001 2345 6789 0123 457',
    account_type: '活期账户',
    customer_name: '李四',
    balance: 156789.45,
    created_at: '2023-03-20T14:15:00Z'
  },
  {
    account_id: 3,
    account_number: 'CN94 0001 2345 6789 0123 458',
    account_type: '定期账户',
    customer_name: '王五',
    balance: 250000.00,
    created_at: '2023-02-10T09:45:00Z'
  }
]);

// 对账单数据
const statementData = reactive({
  statement_id: '',
  opening_balance: 0,
  closing_balance: 0,
  total_credits: 0,
  total_debits: 0,
  transaction_count: 0,
  net_change: 0,
  transactions: []
});

// 计算属性
const selectedAccount = computed(() => {
  return accounts.value.find(account => account.account_id === parseInt(selectedAccountId.value));
});

// 方法
function initializeDates() {
  const today = new Date();
  const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, today.getDate());
  
  dateTo.value = formatDateForInput(today);
  dateFrom.value = formatDateForInput(lastMonth);
}

async function loadStatement() {
  if (!selectedAccountId.value || !dateFrom.value || !dateTo.value) {
    return;
  }

  isLoading.value = true;

  try {
    // 模拟API调用延迟
    await new Promise(resolve => setTimeout(resolve, 1500));

    // 生成模拟交易数据
    const mockTransactions = generateMockTransactions();
    
    // 计算对账单数据
    calculateStatementData(mockTransactions);
    
    showSuccess('对账单加载成功');
    
  } catch (error) {
    console.error('加载对账单失败:', error);
  } finally {
    isLoading.value = false;
  }
}

function generateMockTransactions() {
  const transactions = [];
  const startDate = new Date(dateFrom.value);
  const endDate = new Date(dateTo.value);
  const account = selectedAccount.value;
  
  if (!account) return transactions;

  // 生成随机交易
  const transactionTypes = [
    { description: '工资收入', amount: 8500, type: 'credit' },
    { description: '超市购物', amount: -156.80, type: 'debit' },
    { description: '水电费缴费', amount: -280.50, type: 'debit' },
    { description: '银行转账收入', amount: 2000, type: 'credit' },
    { description: '餐饮消费', amount: -89.90, type: 'debit' },
    { description: '投资收益', amount: 450.25, type: 'credit' },
    { description: '房租支出', amount: -3500, type: 'debit' },
    { description: '手机话费', amount: -99, type: 'debit' },
    { description: '利息收入', amount: 25.30, type: 'credit' },
    { description: 'ATM取款', amount: -500, type: 'debit' },
    { description: '网购消费', amount: -299.99, type: 'debit' },
    { description: '退款', amount: 150, type: 'credit' }
  ];

  let currentDate = new Date(startDate);
  let transactionId = 1;
  
  while (currentDate <= endDate) {
    // 随机决定是否在这一天有交易
    if (Math.random() > 0.7) {
      const randomTransaction = transactionTypes[Math.floor(Math.random() * transactionTypes.length)];
      
      transactions.push({
        transaction_id: transactionId++,
        transaction_date: new Date(currentDate).toISOString(),
        description: randomTransaction.description,
        amount: randomTransaction.amount + (Math.random() - 0.5) * 100, // 添加一些随机变化
        reference_number: `TXN${String(transactionId).padStart(6, '0')}`,
        running_balance: 0 // 稍后计算
      });
    }
    
    currentDate.setDate(currentDate.getDate() + 1);
  }

  // 按日期排序
  transactions.sort((a, b) => new Date(a.transaction_date) - new Date(b.transaction_date));
  
  return transactions;
}

function calculateStatementData(transactions) {
  const account = selectedAccount.value;
  if (!account) return;

  // 设置期初余额（模拟）
  statementData.opening_balance = account.balance - 5000; // 假设期初余额比当前余额少5000
  
  let runningBalance = statementData.opening_balance;
  let totalCredits = 0;
  let totalDebits = 0;

  // 计算每笔交易后的余额
  transactions.forEach(transaction => {
    runningBalance += transaction.amount;
    transaction.running_balance = runningBalance;
    
    if (transaction.amount > 0) {
      totalCredits += transaction.amount;
    } else {
      totalDebits += Math.abs(transaction.amount);
    }
  });

  // 更新对账单数据
  statementData.closing_balance = runningBalance;
  statementData.total_credits = totalCredits;
  statementData.total_debits = totalDebits;
  statementData.transaction_count = transactions.length;
  statementData.net_change = statementData.closing_balance - statementData.opening_balance;
  statementData.transactions = transactions;
  statementData.statement_id = `STMT${selectedAccountId.value}${Date.now()}`;
}

async function downloadPDF() {
  if (!selectedAccount.value) {
    alert('请先选择账户并生成对账单');
    return;
  }

  try {
    // 在实际应用中，这里应该调用PDF生成服务
    // 这里我们模拟PDF下载过程
    showSuccess('正在生成PDF文件...');
    
    await new Promise(resolve => setTimeout(resolve, 2000));
    
    // 模拟下载
    const filename = `银行对账单_${selectedAccount.value.account_number.replace(/\s/g, '')}_${dateFrom.value}_${dateTo.value}.pdf`;
    
    // 在实际应用中，这里应该是真实的PDF文件URL
    const mockPdfUrl = 'data:application/pdf;base64,JVBERi0xLjQKJdPr6eEKMSAwIG9iago8PAovVGl0bGUgKOmTtuihjOWvuei0puWNlSkKL0NyZWF0b3IgKE15QmFuayBTdGF0ZW1lbnQgR2VuZXJhdG9yKQovUHJvZHVjZXIgKE15QmFuayBTeXN0ZW0pCi9DcmVhdGlvbkRhdGUgKEQ6MjAyNDAxMTUxMjAwMDBaKQo+PgplbmRvYmoKMiAwIG9iago8PAovVHlwZSAvQ2F0YWxvZwovUGFnZXMgMyAwIFIKPj4KZW5kb2JqCjMgMCBvYmoKPDwKL1R5cGUgL1BhZ2VzCi9LaWRzIFs0IDAgUl0KL0NvdW50IDEKL01lZGlhQm94IFswIDAgNTk1IDg0Ml0KPj4KZW5kb2JqCjQgMCBvYmoKPDwKL1R5cGUgL1BhZ2UKL1BhcmVudCAzIDAgUgovUmVzb3VyY2VzIDw8Ci9Gb250IDw8Ci9GMSA1IDAgUgo+Pgo+PgovTWVkaWFCb3ggWzAgMCA1OTUgODQyXQovQ29udGVudHMgNiAwIFIKPj4KZW5kb2JqCjUgMCBvYmoKPDwKL1R5cGUgL0ZvbnQKL1N1YnR5cGUgL1R5cGUxCi9CYXNlRm9udCAvSGVsdmV0aWNhCj4+CmVuZG9iago2IDAgb2JqCjw8Ci9MZW5ndGggNDQKPj4Kc3RyZWFtCkJUCi9GMSAxMiBUZgoxMDAgNzAwIFRkCijpk7booYzlr7notKbljaUpIFRqCkVUCmVuZHN0cmVhbQplbmRvYmoKeHJlZgowIDcKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDA5IDAwMDAwIG4gCjAwMDAwMDAxNTggMDAwMDAgbiAKMDAwMDAwMDIwOCAwMDAwMCBuIAowMDAwMDAwMjY3IDAwMDAwIG4gCjAwMDAwMDA0MjggMDAwMDAgbiAKMDAwMDAwMDQ4NyAwMDAwMCBuIAp0cmFpbGVyCjw8Ci9TaXplIDcKL1Jvb3QgMiAwIFIKL0luZm8gMSAwIFIKPj4Kc3RhcnR4cmVmCjU4MQolJUVPRg==';
    
    // 创建下载链接
    const link = document.createElement('a');
    link.href = mockPdfUrl;
    link.download = filename;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    showSuccess('PDF文件下载成功');
    
  } catch (error) {
    console.error('PDF下载失败:', error);
    alert('PDF下载失败，请重试');
  }
}

function printStatement() {
  if (!selectedAccount.value) {
    alert('请先选择账户并生成对账单');
    return;
  }

  // 打印对账单
  window.print();
  showSuccess('打印任务已发送');
}

function navigateBack() {
  console.log('返回上一页');
  // router.go(-1) 或 router.push('/dashboard')
}

function showSuccess(message) {
  notificationMessage.value = message;
  showNotification.value = true;

  setTimeout(() => {
    showNotification.value = false;
  }, 3000);
}

// 辅助函数
function formatDateForInput(date) {
  const d = new Date(date);
  const year = d.getFullYear();
  const month = String(d.getMonth() + 1).padStart(2, '0');
  const day = String(d.getDate()).padStart(2, '0');
  
  return `${year}-${month}-${day}`;
}

function formatDate(dateString) {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  }).format(date);
}

function formatDateTime(date) {
  return new Intl.DateTimeFormat('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  }).format(date);
}

function formatCurrency(value) {
  if (value === null || value === undefined) return '0.00';
  return new Intl.NumberFormat('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(Math.abs(value));
}

// 组件挂载时初始化
onMounted(() => {
  initializeDates();
  if (accounts.value.length > 0) {
    selectedAccountId.value = accounts.value[0].account_id;
    loadStatement();
  }
});
</script>

<style scoped>
.bank-statement-page {
  min-height: 100vh;
  background-color: #f8fafc;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Header */
.page-header {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.btn-back {
  background-color: #f3f4f6;
  color: #374151;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-back:hover {
  background-color: #e5e7eb;
}

.header-info h1 {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 0.25rem 0;
}

.header-info p {
  color: #6b7280;
  margin: 0;
  font-size: 0.875rem;
}

.header-actions {
  display: flex;
  gap: 0.75rem;
}

.btn-download,
.btn-print {
  background-color: #1e40af;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-download:hover,
.btn-print:hover {
  background-color: #1e3a8a;
}

/* Filters Section */
.filters-section {
  padding: 1.5rem 0;
}

.filters-card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  display: flex;
  gap: 1.5rem;
  align-items: end;
}

.filter-group {
  flex: 1;
}

.filter-group label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: #374151;
}

.filter-group select,
.filter-group input {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  transition: border-color 0.2s;
}

.filter-group select:focus,
.filter-group input:focus {
  border-color: #1e40af;
  outline: none;
  box-shadow: 0 0 0 2px rgba(30, 64, 175, 0.1);
}

.btn-filter {
  background-color: #059669;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-filter:hover {
  background-color: #047857;
}

/* Statement Container */
.statement-container {
  padding: 2rem 0;
}

.statement-card {
  background-color: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* Bank Header */
.bank-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem;
  border-bottom: 2px solid #1e40af;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.bank-name {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1e40af;
  margin: 0 0 1rem 0;
}

.bank-details {
  color: #4b5563;
  line-height: 1.6;
}

.bank-details p {
  margin: 0.25rem 0;
}

.logo-placeholder {
  background-color: #1e40af;
  color: white;
  padding: 1.5rem;
  border-radius: 0.75rem;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  min-width: 150px;
}

/* Statement Title */
.statement-title {
  text-align: center;
  padding: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.statement-title h2 {
  font-size: 2rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 0.5rem 0;
}

.statement-period {
  color: #6b7280;
  font-size: 1rem;
}

/* Account Information */
.account-info-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 2rem;
  padding: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.75rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f3f4f6;
}

.detail-label {
  font-weight: 500;
  color: #4b5563;
}

.detail-value {
  color: #1f2937;
  font-weight: 500;
}

.balance-info {
  background-color: #f8fafc;
  border-radius: 0.5rem;
  padding: 1.5rem;
  border-left: 4px solid #1e40af;
}

.balance-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.balance-item:last-child {
  margin-bottom: 0;
}

.balance-label {
  font-weight: 500;
  color: #4b5563;
}

.balance-value {
  font-weight: 600;
  color: #1f2937;
  font-size: 1.125rem;
}

.balance-value.highlight {
  color: #1e40af;
  font-size: 1.25rem;
}

/* Summary Section */
.summary-section {
  padding: 2rem;
  border-bottom: 1px solid #e5e7eb;
}

.summary-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 1.5rem 0;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: #f8fafc;
  border-radius: 0.5rem;
  border-left: 4px solid #e5e7eb;
}

.summary-label {
  font-weight: 500;
  color: #4b5563;
}

.summary-value {
  font-weight: 600;
  font-size: 1.125rem;
}

.summary-value.credit {
  color: #059669;
}

.summary-value.debit {
  color: #dc2626;
}

/* Transactions Section */
.transactions-section {
  padding: 2rem;
}

.transactions-section h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 1.5rem 0;
}

.transactions-table-container {
  overflow-x: auto;
}

.transactions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.transactions-table th,
.transactions-table td {
  padding: 0.75rem;
  text-align: left;
  border-bottom: 1px solid #e5e7eb;
}

.transactions-table th {
  background-color: #f9fafb;
  font-weight: 600;
  color: #374151;
  position: sticky;
  top: 0;
}

.transactions-table tbody tr:hover {
  background-color: #f9fafb;
}

.opening-balance-row,
.closing-balance-row {
  background-color: #f0f9ff;
  font-weight: 500;
}

.closing-balance-row {
  background-color: #ecfdf5;
}

.amount-cell {
  text-align: right;
  font-weight: 500;
}

.amount-cell.credit {
  color: #059669;
}

.amount-cell.debit {
  color: #dc2626;
}

.balance-cell {
  text-align: right;
  font-weight: 600;
  color: #1f2937;
}

.balance-cell.highlight {
  color: #1e40af;
  background-color: #dbeafe;
}

/* Statement Footer */
.statement-footer {
  padding: 2rem;
  background-color: #f8fafc;
  border-top: 1px solid #e5e7eb;
}

.footer-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1e40af;
  margin: 0 0 1rem 0;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section li {
  margin-bottom: 0.5rem;
  color: #4b5563;
  font-size: 0.875rem;
}

.footer-section p {
  margin: 0.5rem 0;
  color: #4b5563;
  font-size: 0.875rem;
}

.generation-info {
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid #e5e7eb;
  color: #6b7280;
  font-size: 0.875rem;
}

.generation-info p {
  margin: 0.25rem 0;
}

/* Loading and No Data States */
.loading-state,
.no-data-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
  color: #6b7280;
}

.no-data-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}

.no-data-state h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  color: #374151;
}

.loading-spinner {
  width: 2rem;
  height: 2rem;
  border: 2px solid transparent;
  border-top: 2px solid #1e40af;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Notification */
.notification {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  z-index: 99;
  max-width: 400px;
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.success-notification {
  background-color: #dcfce7;
  border-left: 4px solid #059669;
}

.notification-icon {
  font-size: 1.5rem;
  color: #059669;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: #166534;
}

.notification-message {
  font-size: 0.875rem;
  color: #166534;
}

.notification-close {
  background: none;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: #6b7280;
}

/* Print Styles */
@media print {
  .page-header,
  .filters-section,
  .header-actions,
  .notification {
    display: none !important;
  }
  
  .statement-container {
    padding: 0;
  }
  
  .statement-card {
    box-shadow: none;
    border-radius: 0;
  }
  
  .bank-header {
    background: white;
    border-bottom: 2px solid #000;
  }
  
  .transactions-table th {
    background-color: #f0f0f0;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .header-content {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }
  
  .header-left {
    flex-direction: column;
  }
  
  .filters-card {
    flex-direction: column;
    align-items: stretch;
  }
  
  .bank-header {
    flex-direction: column;
    text-align: center;
  }
  
  .account-info-section {
    grid-template-columns: 1fr;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
  
  .footer-info {
    grid-template-columns: 1fr;
  }
  
  .transactions-table {
    font-size: 0.75rem;
  }
  
  .transactions-table th,
  .transactions-table td {
    padding: 0.5rem 0.25rem;
  }
}

@media (max-width: 480px) {
  .bank-name {
    font-size: 2rem;
  }
  
  .statement-title h2 {
    font-size: 1.5rem;
  }
  
  .notification {
    left: 1rem;
    right: 1rem;
    max-width: none;
  }
}
</style>
